Comment doter un groupe d'ingénierie international d'un langage d'interface commun — un design system qui relie Figma au code, sert de socle aux nouvelles applications métiers et permet à l'IA de produire des écrans conformes aux standards Egis.
Egis conçoit et exploite des infrastructures dans une centaine de pays. Ses équipes digitales produisent un nombre croissant d'applications métiers — outils d'ingénierie, plateformes de données, sites grand public — portées par des business lines et des régions différentes. Chaque produit avançait avec ses propres choix d'interface : un effort de design et de développement répété d'un projet à l'autre, et des utilisateurs qui changent de logique à chaque outil.
Définir la vision design et les standards UX/UI à l'échelle du groupe, puis les traduire en un design system partagé — de la bibliothèque Figma aux composants codés — et fédérer autour de lui une communauté de designers, PO et développeurs.
Un seul système pour des produits qui ne se ressemblent pas : un site d'aéroport grand public, une plateforme RH au Moyen-Orient, des outils métiers pour ingénieurs. Le design system devait être assez strict pour garantir la cohérence et les standards Egis, assez ouvert pour laisser à chaque métier ses usages — et continuer à vivre une fois entre les mains des équipes.
L’objectif final est de permettre une communication fluide entre les développeurs et les designers UI. Avec ce design system, les deux parties se retrouvent autour d’une “Bible” documentée, mise à jour et agnostique :
Plus de 1 000 composants ont été dessinés, optimisés avec des mises en situation, testés et sécurisés : c’est un grand confort de travail, un gain de temps conséquent et une garantie pour les designers et développeurs de voir leur travail respecté lors de la mise en production.
Les mises à jour sont primordiales pour les utilisateurs. Leurs retours d’expériences, leurs demandes d'optimisation sont prises en compte pour permettre une efficience maximale, examinées entre développeurs et designers et publiées avec toute la documentation nécessaire.
C’est un design system agnostique car nous pouvons brancher n’importe quelle librairie de composants (MUI, Tailwind CSS, Apple…) à partir d’un fichier Figma référence qu’on peut personnaliser grâce à ces variables en fonction des design system des clients externes et en fonction des applications : la base reste commune et solide.
Ce design system a vocation à s’enrichir au fil du temps de toutes les nouveautés technologiques tant au niveau du design, du développement qu’au niveau des besoins utilisateurs. Sa prise en main doit être facile pour les non développeurs, non designers qui arrivent chez Egis ou qui veulent réaliser un POC. Un effort pédagogique est mise en place à travers des ateliers réguliers ou à la demande.